import React from 'react';
import {View, Image, TouchableWithoutFeedback, Text, Modal} from 'react-native';
import i18n from '../i18n';
import stylesXS from '../styles/xs';
import stylesMD from '../styles/md';
import stylesLG from '../styles/lg';
import ic_export from '../../assets/ic_export.png';
import dimesA5 from '../styles/size/a5';
import dimesA5X2 from '../styles/size/a5x2';
import dimesA6 from '../styles/size/nom';

const ModalStickerBtn = ({
  modalVisible,
  onDel,
  onExport,
  onReset,
  screenHeight,
  screenWidth,
  onClose,
  stickers,
}) => {
  let wd = Math.round(screenWidth);
  const styles =
    wd === 1024 || wd === 1365
      ? stylesLG
      : wd === 994 || wd === 1325
      ? stylesMD
      : stylesXS;
  const nom = wd === 1024 || wd === 1365
    ? dimesA5X2
    : wd === 994 || wd === 1325
      ? dimesA5
      : dimesA6;
  const ic_rename = require('../../assets/ic_rename.png');
  const ic_delete = require('../../assets/ic_delete.png');
  const ic_export = require('../../assets/ic_export.png');
  return (
    <Modal animationType="slide" transparent={true} visible={modalVisible}>
      <View
        style={{
          position: 'absolute',
          width: screenWidth,
          height: screenHeight,
          top: 0,
          left: 0,
        }}>
        <TouchableWithoutFeedback onPress={onClose}>
          <View
            style={{
              position: 'absolute',
              width: screenWidth,
              height: screenHeight,
              backgroundColor: '#f9f9fff9',
              top: 0,
              left: 0,
              opacity: 0,
            }}
          />
        </TouchableWithoutFeedback>
        <View
          style={[styles.operateCard, styles.borderWidth, styles.modalBtnCard,
            {
              borderWidth: nom.dp_px_2 - nom.dp_px_1 / 2
            }
          ]}>
          <TouchableWithoutFeedback underlayColor={'#f9f9f9'} onPress={onReset}>
            <View
              style={[
                styles.operateCardItem,
                styles.deleteBtn,
                styles.bottomBorder,
              ]}>
              <Image
                style={[
                  styles.checkBtnWH,
                  {
                    resizeMode: 'contain',
                  },
                ]}
                source={ic_rename}
              />
              <Text
                style={[
                  styles.marginLeft_20,
                  styles.fontSize_30,
                  {
                    fontWeight: '400',
                  },
                ]}
                ellipsizeMode={'middle'}
                numberOfLines={1}>
                {i18n.t('btn.rename')}
              </Text>
            </View>
          </TouchableWithoutFeedback>
          {stickers.length > 0 ? (
            <TouchableWithoutFeedback
              underlayColor={'#f9f9f9'}
              onPress={onExport}>
              <View
                style={[
                  styles.operateCardItem,
                  styles.deleteBtn,
                  styles.bottomBorder,
                ]}>
                <Image
                  style={[
                    styles.checkBtnWH,
                    {
                      resizeMode: 'contain',
                    },
                  ]}
                  source={ic_export}
                />
                <Text
                  style={[
                    styles.marginLeft_20,
                    styles.fontSize_30,
                    {
                      fontWeight: '400',
                    },
                  ]}
                  ellipsizeMode={'middle'}
                  numberOfLines={1}>
                  {i18n.t('btn.export')}
                </Text>
              </View>
            </TouchableWithoutFeedback>
          ) : (
            <View
              style={[
                styles.operateCardItem,
                styles.deleteBtn,
                styles.bottomBorder,
                {opacity: 0.5},
              ]}>
              <Image
                style={[
                  styles.checkBtnWH,
                  {
                    resizeMode: 'contain',
                  },
                ]}
                source={ic_export}
              />
              <Text
                style={[
                  styles.marginLeft_20,
                  styles.fontSize_30,
                  {
                    fontWeight: '400',
                  },
                ]}
                ellipsizeMode={'middle'}
                numberOfLines={1}>
                {i18n.t('btn.export')}
              </Text>
            </View>
          )}
          <TouchableWithoutFeedback underlayColor={'#f9f9f9'} onPress={onDel}>
            <View style={[styles.operateCardItem, styles.deleteBtn]}>
              <Image
                style={[
                  styles.checkBtnWH,
                  {
                    resizeMode: 'contain',
                  },
                ]}
                source={ic_delete}
              />
              <Text
                style={[
                  styles.fontSize_30,
                  styles.marginLeft_20,
                  {
                    fontWeight: '400',
                  },
                ]}
                ellipsizeMode={'middle'}
                numberOfLines={1}>
                {i18n.t('btn.delete')}
              </Text>
            </View>
          </TouchableWithoutFeedback>
        </View>
      </View>
    </Modal>
  );
};
export default ModalStickerBtn;
